<template>
  <el-button type="primary" @click="openDialog">
    添加用户
  </el-button>
<!--  用户表-->
<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="username" label="姓名" width="200"/>
  <el-table-column prop="phone" label="手机号"  width="200"/>
  <el-table-column prop="sex" label="性别"  width="200">
  <template  #default="scope">
    <span v-if="scope.row.sex == 0">男</span>
    <span v-else-if="scope.row.sex == 1">女</span>
    <span v-else-if="scope.row.sex==2">--</span>
  </template>
  </el-table-column>
  <el-table-column prop="remark" label="备注"  width="200"/>
  <el-table-column label="操作">
    <template #default="scope">
      <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)"
      >修改</el-button
      >
      <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
      >删除</el-button
      >
    </template>
  </el-table-column>
</el-table>

  <el-dialog
      v-model="dialogVisible"
      width="50%"
  >
    <h2 style="text-align: center">{{dialogTitle}}</h2>
    <br/>
      <el-form :model="user"
               label-width="120px"
               :size="formSize"
               id="editForm"
               :rules="rules"
               ref="ediForm"
      >
        <el-form-item label="用户名" prop="username" required>
          <el-input  v-model="user.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password" required v-show="isShowPwd">
          <el-input v-model="user.password" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone" required>
          <el-input v-model="user.phone" />
        </el-form-item>
        <el-form-item label="性别" prop="" >
          <el-radio-group v-model="user.sex">
            <el-radio label="0" >男</el-radio>
            <el-radio label="1" >女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="" >
          <el-input v-model="user.remark" />
        </el-form-item>
      </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button  @click="cancel">取消</el-button>
        <el-button  type="primary" @click="handleCreate" v-show="isShowCreateBtn">
          确定
        </el-button>
         <el-button  type="primary" @click="edit" v-show="isShowUpdateBtn">
          确定修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

export default {
  name: "user",
  data() {
    return{
      dialogVisible:false,
      tableData:[{}],
      formSize:"default",
      dialogTitle: "",
      isShowPwd: true,
      isShowCreateBtn:false,
      isShowUpdateBtn:false,
      user:{
        username: "",
        password: "",
        phone: "",
        sex: "2",
        img: null,
        remark: "用户",
        createTime: "",
        updateTime: "",
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: ['blur','change']}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: ['blur','change']}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: ['blur','change']}
        ]
      }
    }
  },
  methods: {
    cancel(){
      this.dialogVisible=false;
      this.isShowCreateBtn=false;
      this.isShowUpdateBtn=false;
      this.user={
        username: "",
        password: "",
        phone: "",
        sex: "2",
        img: null,
        remark: "用户",
        createTime: "",
        updateTime: "",
      }
    },
    openDialog(){
      this.dialogTitle="添加用户";
      this.dialogVisible=true;
      this.isShowCreateBtn=true;
      this.isShowPwd=true;
    },
    fetchData(){
      this.$axios.get("http://localhost:8888/users/findAllUser")
          .then(response => {
            this.tableData=response.data.data;
            console.info(this.tableData);
            // document.getElementById("editForm").reset();
            this.user={
              username: "",
              password: "",
              phone: "",
              sex: "2",
              img: null,
              remark: "用户",
              createTime: "",
              updateTime: "",
            }
            this.dialogVisible = false;
            this.isShowUpdateBtn=false;
            this.isShowCreateBtn=false;
          })
    },
    handleEdit(number,user){
      this.dialogTitle="编辑用户";
      this.dialogVisible=true;
      this.isShowUpdateBtn=true;
      this.isShowPwd=false;
      this.user=user;
    },
    edit(){
      this.$refs.ediForm.validate(isValid => {
          if(isValid){
            this.$axios.post("http://localhost:8888/users/updateUser",this.user)
                .then(response=>{
                  if(response.data.status==10000){
                    this.$message({
                      message: "修改成功",
                      type: "success",
                    });
                    this.fetchData();
                  }else{
                    this.$message.error({
                      type:"error",
                      message:response.data.msg
                    })
                  }
                })
          } else {
            this.$message.error('请填写必填信息！');
          }
      })
    },
    handleDelete(number,user){
      this.$alert(`确认删除${user.username}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        console.info(user.id);
        const id=user.id;
        this.$axios.get("http://localhost:8888/users/deleteUser", {params:{id}})
            .then(response=>{
              if(response.data.status==10000){
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.fetchData();
              }else{
                this.$message.error({
                  type:"error",
                  message:response.data.msg
                })
              }
            })
            .catch(()=>{

            })
      })

    },
    handleCreate(){
      this.$refs.ediForm.validate(isValid => {
        if(isValid){
          this.$axios.post("http://localhost:8888/users/addUser",this.user)
              .then(response=>{
                if(response.data.status==10000){
                  this.$message({
                    message: "添加成功",
                    type: "success",
                  });
                  this.fetchData();
                }else{
                  this.$message.error({
                    type:"error",
                    message:response.data.msg
                  })
                }
              })
        } else {
          this.$message.error('请填写必填信息！');
        }
      })
    },
  },
  created() {
    this.fetchData()
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>